<template>
  <el-button @click="refresh()">refresh</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" label="index" width="180" />
    <el-table-column prop="title" label="Name" width="180" />
    <el-table-column prop="price" label="price" />
    <el-table-column label="Operations">
      <!-- scope is row data -->
      <template #default="scope">
        <!-- "add_cart(scope.$index 当前行的索引, scope.row 当前行数据)" -->
        <el-button size="small" @click="add_cart(scope.row.id)">add cart</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>

import { inject } from 'vue';
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { fetch_x } from '/src/api/fetch_wrapper.js'

const server_host = inject('h');
const router = useRouter();
const user = JSON.parse(localStorage.getItem("user"))

const tableData = ref([]);

async function refresh() {
    const s = await fetch_x(server_host + "/f1/product/list", {
      method: "post",
      headers: {
        "Content-Type": "application/json",
      },
      // body:"{}"
      body: JSON.stringify({ page_num: 1, page_size: 32 })
    });
    tableData.value = s.records;
}

refresh();

async function add_cart(p_id) {
    const res = await fetch_x(server_host + "/f1/cart/user/put", {
      method: "post",
      headers: {
        "Content-Type": "application/json",
      },
      // body:"{}"
      body: JSON.stringify(p_id)
    });

}

</script>
<style>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
  